<template>
  <div class="Overview-container">
    <div class="overview">
      <TitleBar :title="'管理概览'">
        <el-select v-model="select" style="width: 120px">
          <el-option
            v-for="item in readUserInfo.manageArr"
            :key="item.id"
            :label="item.DormitoryName"
            :value="item.id"
          />
        </el-select>
      </TitleBar>
      <div class="main">
        <DisplayBox
          :content="displayBoxDataRef"
          :Loading="isLoading"
        ></DisplayBox>
      </div>
    </div>
    <div class="dynamic">
      <TitleBar title="最新动态"></TitleBar>
      <Dynamic :dormitoryId="select"></Dynamic>
    </div>
  </div> 
</template>

<script setup>
import TitleBar from "@/components/TitleBar/index.vue";
import DisplayBox from "@/components/DisplayBox/index.vue";
import { useUserStore } from "@/store/useUserStore.js";
import { getDormitory } from "@/api/dormitoryInfo.js";
import { storeToRefs } from "pinia";
import { ref,watchEffect } from "vue";
import Dynamic from "./components/Dynamic.vue";
const { readUserInfo } = storeToRefs(useUserStore());


const isLoading = ref(false); // 加载中
console.log(readUserInfo.value);
const select = ref(readUserInfo.value.manageArr ? readUserInfo.value.manageArr[0].id : "");
const displayBoxDataRef = ref([
  {
    Icon: "dormitory",
    title: "宿舍楼",
    text: "",
    IconColor: "#40c9c6",
  },
  {
    Icon: "floor",
    title: "楼层",
    text: "",
    IconColor: "#73bff9",
  },
  {
    Icon: "roomIcon",
    title: "宿舍",
    text: "",
    IconColor: "#f4516c",
  },
  {
    Icon: "student",
    title: "学生数",
    text: "",
    IconColor: "#34bfa3",
  },
]);
//获取宿舍楼详情信息
const dormitory = async (id) => {
  if(!id) return
  isLoading.value = true;
  const { data } = await getDormitory(id);
  displayBoxDataRef.value[0].text = data[0].DormitoryName;
  displayBoxDataRef.value[1].text = data[0].floorNum;
  displayBoxDataRef.value[2].text = data[0].roomNum * data[0].floorNum;
  displayBoxDataRef.value[3].text = data[0].dormitoryresided;
  isLoading.value = false;
};
dormitory(select.value);

watchEffect(() => {
  dormitory(select.value);
});


</script>

<style lang="less" scoped>
.Overview-container {
  width: 100%;
  margin-bottom:30px ;
}
</style>
